<!-- 木制品产量趋势 -->
<template>
  <div class="content-outputs">
    <div class="title"></div>
    <div class="minpng">
      <div class="content">
        <div ref="content1" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "outputs",
  data() {
    return {
      option: {
        title: {
          text: "%",
          top: "3%",
          left: "5%",
          textStyle: {
            //文字颜色
            color: "#8FB9FF",
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: "lighter",
            //字体系列
            fontFamily: "NotoSansHans",
            //字体大小
            fontSize: 12,
          },
        },
        // 十字指针
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          left: "11%",
          top: "13%",
          right: "10%",
          bottom: "15%",
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#0B427A ",
              width: 1,
            },
          },
          axisLabel: {
            //  是否显示坐标刻度标签(这了指是否显示x轴上的月份)
            show: true,
            // 标签文字的颜色
            color: "#8FB9FF",
            fontWeight: "lighter",
            //字体系列
            fontFamily: "NotoSansHans",
            //字体大小
            fontSize: 12,
          },
          //x轴刻度线设置
          axisTick: {
            show: false,
          },
          data: [2012, 2014, 2016, 2018, 2020, 2022],
        },
        yAxis: {
          type: "value",
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              width: 1,
              color: "#0B427A",
            },
            show: true, //隐藏或显示
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#0B427A ",
              width: 1,
            },
          },
          axisLabel: {
            //  是否显示坐标刻度标签(这里指是否显示y轴上的数值)
            show: true,
            // 标签文字的颜色
            color: "#8FB9FF",
            fontWeight: "lighter",
            //字体系列
            fontFamily: "NotoSansHans",
            //字体大小
            fontSize: 12,
            interval: "auto",
            // formatter: "{value}%",
          },
          //y轴刻度线设置
          axisTick: {
            show: false,
          },
          // boundaryGap: false,
        },
        series: [
          {
            data: [10, 43, 55, 22, 44, 92],
            type: "bar",
            areaStyle: {},
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [12, 12, 0, 0],
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#24C9FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#142B80", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
          },
          {
            data: [20, 30, 25, 79, 45, 50],
            type: "line",
            smooth: true,
            symbol: "circle", //将小圆点改成实心 不写symbol默认空心
            // symbol: function (value, params) {
            //     console.log(params);
            //     if (value == this.porintMax) {
            //         return 'circle'; //拐点类型
            //     } else {
            //         return 'none'; //拐点不显示
            //     }
            // },
            symbolSize: 5, //小圆点的大小

            showSymbol: false,
            showMaxLabel: true,
            itemStyle: {
              normal: {
                // 拐点上显示数值
                // label: {
                //   show: true,
                //   color: "#00C6FB",
                // },
                color: "#06D28D", // 拐点边框颜色
              },
            },
            lineStyle: {
              color: "#06D28D",
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.initOutPut();
  },
  computed: {
    porintMax() {
      return Math.max(...this.option.series[1].data);
    },
  },
  methods: {
    initOutPut() {
      this.$nextTick(function () {
        let output = this.$echarts.init(this.$refs.content1);
        output.setOption(this.option, true);

        window.addEventListener("resize", () => {
          output.resize();
        });
      });
      console.log(this.porintMax);
    },
  },
};
</script>

<style scoped>
.content-outputs {
  background: url("~@/wood/images/patr-3.png") no-repeat;
  background-size: 100% 100%;
  height: 31.7vh;
  padding-top: 5%;

}

.content-outputs .title {
  background: url("~@/wood/images/title2.png") no-repeat;
  background-size: 100% 100%;
  width: 51%;
  height: 13%;
  margin-left: 4%;
}

.content-outputs .minpng {
  width: 100%;
  height: calc(100% - 40px);
  ;

 
}
.content-outputs .minpng .content {
    height: 100%;
  }
</style>